import { mapServer, locationIp } from './ip.ts'
const pixelRatio = window.devicePixelRatio;
const spriteUrl = pixelRatio >= 2 ? '/mapbox/offlinemap/sprites/sprite' : '/mapbox/offlinemap/sprites/sprite';
export const mapStyles: any = {
    // 离线天地图影像
    darkSkyMap: {
        version: 8,
        sources: {
            'osm-tiles': {
                type: 'raster',
                tiles: [`${mapServer}/tianditu/{z}/{y}/{x}.png`],
            }
        },
        glyphs: `${locationIp}/mapbox/offlinemap/fonts/{fontstack}/{range}.pbf`, //字体
        sprite: `${locationIp}${spriteUrl}`,  //雪碧图 
        layers: [{
            id: 'osm-tiles',
            type: 'raster',
            source: 'osm-tiles'
        }]
    },
    // 在线天地图矢量
    onLineVectorMap: {
        version: 8,
        sources: {
            'osm-tiles': {
                type: 'raster',
                tiles: [`http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=bb338759f9c3e13944534f482925ec3f`],
            }
        },
        glyphs: `${locationIp}/mapbox/offlinemap/fonts/{fontstack}/{range}.pbf`, //字体
        sprite: `${locationIp}${spriteUrl}`,  //雪碧图 
        layers: [{
            id: 'osm-tiles',
            type: 'raster',
            source: 'osm-tiles'
        }]
    },
    // 在线天地图影像
    onlineDarkSkyMap: {
        version: 8,
        sources: {
            'osm-tiles': {
                type: 'raster',
                tiles: [`http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=bb338759f9c3e13944534f482925ec3f`],
            }
        },
        glyphs: `${locationIp}/mapbox/offlinemap/fonts/{fontstack}/{range}.pbf`, //字体
        sprite: `${locationIp}${spriteUrl}`,  //雪碧图 
        layers: [{
            id: 'osm-tiles',
            type: 'raster',
            source: 'osm-tiles'
        }]
    },
    // 谷歌底图
    googleMap: {
        version: 8,
        sources: {
            'osm-tiles': {
                type: 'raster',
                tiles: [`http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}`],

            }
        },
        glyphs: `${locationIp}/mapbox/offlinemap/fonts/{fontstack}/{range}.pbf`, //字体
        sprite: `${locationIp}${spriteUrl}`,  //雪碧图 
        layers: [{
            id: 'osm-tiles',
            type: 'raster',
            source: 'osm-tiles'
        }]
    }
}
export const layers: any = {
    // 矢量图层  多边形
    fillLayerOptions: {
        id: 'fill-layer',
        type: 'fill',
        source: {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Polygon',
                            coordinates: [
                                [
                                    [-74.5, 40],
                                    [-74.5, 41],
                                    [-75.5, 41],
                                    [-75.5, 40],
                                    [-74.5, 40]
                                ]
                            ]
                        },
                        properties: {}
                    }
                ]
            }
        },
        paint: {
            'fill-color': '#ff0000',
            'fill-opacity': 0.5
        }
    },
    // 线图层
    lineLayerOptions: {
        id: 'line-layer',
        type: 'line',
        source: {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'LineString',
                            coordinates: [
                                [-74.5, 40],
                                [-75.5, 41]
                            ]
                        },
                        properties: {}
                    }
                ]
            }
        },
        paint: {
            'line-color': '#00ff00',
            'line-width': 3
        }
    },
    // 标记图层 显示文本或图标（如标注、图标等）
    symbolLayerOptions: {
        id: 'symbol-layer',
        type: 'symbol',
        source: {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [-74.5, 40.5]
                        },
                        properties: {
                            title: 'New York',
                            icon: 'star'
                        }
                    }
                ]
            }
        },
        layout: {
            // 'icon-size': 1.5,
            'icon-color': "#ff0000",
            'text-field': '{name}',
            'text-anchor': 'center',
        },
        paint: {
            'text-color': '#fff',
            'text-size': 12
        },
        // maxzoom: '{maxlevel}' // 使用 feature 的 maxlevel 属性
    },
    // 圆图层
    circleLayerOptions: {
        id: 'circle-layer',
        type: 'circle',
        source: {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [-74.5, 40.5]
                        },
                        properties: {}
                    }
                ]
            }
        },
        paint: {
            'circle-radius': 8,
            'circle-color': '#0000ff',
            'circle-opacity': 0.6
        }
    },
    // 光栅图层 栅格数据
    rasterLayerOptions: {
        id: 'raster-layer',
        type: 'raster',
        source: {
            type: 'raster',
            url: 'mapbox://mapbox.satellite',
            tileSize: 256
        },
        paint: {
            'raster-opacity': 0.7
        }
    },
    // 矢量图层
    vectorLayerOptions: {
        id: 'vector-layer',
        type: 'line',
        source: {
            type: 'vector',
            url: 'mapbox://mapbox.mapbox-streets-v8'
        },
        'source-layer': 'road',
        paint: {
            'line-color': '#00ff00',
            'line-width': 2
        }
    },
    //用于渲染数字高程模型（DEM）数据的图层
    rasterDemLayerOptions: {
        id: 'raster-dem-layer',
        type: 'raster-dem',
        source: {
            type: 'raster',
            url: 'mapbox://mapbox.terrain-rgb',
            tileSize: 256
        },
        paint: {
            'raster-dem-opacity': 0.5
        }
    },
    // 飞机模型
    airOptions: {
        id: 'symbol-layer',
        type: 'symbol',
        source: {
            type: 'geojson',
            data: {}
        },
        layout: {
            'icon-image': 'airport-15',
            'icon-size': 1.5,
            'text-field': '{name}',
            'text-offset': [0, 0],
            'text-anchor': 'center',
            'visibility': 'visible'
        },
        paint: {
            'text-color': '#000'
        }
    },
    // 线图层
    airLineOptions: {
        id: 'line-layer',
        type: 'line',
        source: {
            type: 'geojson',
            data: {}
        },
        layout: {
            'visibility': 'visible', // 设置为 'none' 来隐藏图层
        },
        paint: {
            'line-color': '#ff0000',
            'line-width': 3
        }
    }
}

export const popupNotification = {
    // 实时飞行数据展示
    realTimeLayer(options: any) {
        return `<div style="
      background: #FFFFFF;
      border-radius: 6px;
      padding: 6px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      font-family: Arial, sans-serif;
    ">
      <div style="
        display: flex;
        align-items: center;
        gap: 4px;
        padding-bottom: 4px;
        border-bottom: 1px solid #F0F0F0;
      ">
        <div style="
          background: #437EF1;
          color: white;
          padding: 1px 4px;
          border-radius: 3px;
          font-size: 10px;
        ">飞行中</div>
        <div style="
          color: #437EF1;
          font-size: 11px;
          font-weight: 500;
        ">${options.airplaneNumber || 'B3836'}</div>
      </div>
      <div style="display: grid; grid-template-columns: 1fr 1fr; text-align: center;">
        <div>
          <div style="color: #909399; font-size: 9px;">海拔高度</div>
          <div style="color: #437EF1; font-size: 11px; font-weight: 500; font-family: DIN;">
            ${options.altitude || '0'}<span style="font-size: 9px; color: #909399; margin-left: 1px;">米</span>
          </div>
        </div>
        <div>
          <div style="color: #909399; font-size: 9px;">飞行速度</div>
          <div style="color: #437EF1; font-size: 11px; font-weight: 500; font-family: DIN;">
            ${options.speed || '0'}<span style="font-size: 9px; color: #909399; margin-left: 1px;">km/h</span>
          </div>
        </div>
        <div>
          <div style="color: #909399; font-size: 9px;">经度</div>
          <div style="color: #437EF1; font-size: 11px; font-weight: 500; font-family: DIN;">
            ${options.longitude || '0'}
          </div>
        </div>
        <div>
          <div style="color: #909399; font-size: 9px;">纬度</div>
          <div style="color: #437EF1; font-size: 11px; font-weight: 500; font-family: DIN;">
            ${options.latitude || '0'}
          </div>
        </div>
      </div>
    </div>`
    },
    // 聚合信息展示
    clusterLayer(options: any) {
        return `<div style="
        background: #FFFFFF;
        border-radius: 6px;
        padding: 6px;
        min-width: 150px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        font-family: Arial, sans-serif;
      ">
        <div style="
          display: flex;
          align-items: center;
          gap: 4px;
          margin-bottom: 6px;
          padding-bottom: 4px;
          border-bottom: 1px solid #F0F0F0;
        ">
          <div style="
            background: #437EF1;
            color: white;
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 10px;
          ">测试数据</div>
          <div style="
            color: #437EF1;
            font-size: 11px;
            font-weight: 500;
          ">${options.label || 'B3836'}</div>
        </div>
        <div style="display: grid; grid-template-columns: 1fr 1fr; text-align: center;">
          <div style="padding: 2px;">
            <div style="color: #909399; font-size: 9px;">海拔高度</div>
            <div style="color: #437EF1; font-size: 11px; font-weight: 500; font-family: DIN;">
              ${options.altitude || '0'}<span style="font-size: 9px; color: #909399; margin-left: 1px;">米</span>
            </div>
          </div>
          <div style="padding: 2px;">
            <div style="color: #909399; font-size: 9px;">飞行速度</div>
            <div style="color: #437EF1; font-size: 11px; font-weight: 500; font-family: DIN;">
              ${options.speed || '0'}<span style="font-size: 9px; color: #909399; margin-left: 1px;">km/h</span>
            </div>
          </div>
          <div style="padding: 2px;">
            <div style="color: #909399; font-size: 9px;">经度</div>
            <div style="color: #437EF1; font-size: 11px; font-weight: 500; font-family: DIN;">
              ${options.longitude || '0'}
            </div>
          </div>
          <div style="padding: 2px;">
            <div style="color: #909399; font-size: 9px;">纬度</div>
            <div style="color: #437EF1; font-size: 11px; font-weight: 500; font-family: DIN;">
              ${options.latitude || '0'}
            </div>
          </div>
        </div>
      </div>`
    }
}
